<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        @enter="handleQuery"
        label-width="30px"
      >
        <el-form-item label="IP" prop="ip">
          <common-input
            v-model="queryParams.ip"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-form>
    </common-search>

    <common-table v-loading="loading" slot="content" :data="sourceList">
      <el-table-column
        label="IP"
        align="left"
        prop="sourceIp"
        show-overflow-tooltip
      />
      <el-table-column
        label="访问总量"
        align="left"
        prop="totalVisit"
        show-overflow-tooltip
      />
      <el-table-column
        label="当日访问量"
        align="left"
        prop="todayVisit"
        show-overflow-tooltip
      />
      <el-table-column
        label="最后一次访问时间"
        align="left"
        prop="lastTime"
        show-overflow-tooltip
      />
      <el-table-column label="操作" align="left" width="120px">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleAnalysis(scope.row)"
            v-hasPermi="['apisecurity:accessSource:analysis']"
            >分析
          </el-button>

          <el-button
            type="text"
            @click="handleDetail(scope.row)"
            v-hasPermi="['apisecurity:accessSource:detail']"
            >访问详情
          </el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <url-detail
      v-if="accessDetailShow"
      @back="accessDetailShow = false"
      :detailUrl="currentIp"
    />

    <analysis-detail
      v-if="analysisDetailShow"
      :currentIp="currentIp"
      @back="analysisDetailShow = false"
    ></analysis-detail>
  </common-list>
</template>

<script>
import { fetchList } from "@/api/apisecurity/accesssource/accesssource.js";
import AnalysisDetail from "./components/analysisDetail.vue";
import BaseList from "@/mixins/BaseList";
import UrlDetail from "./components/urlDetail.vue";

export default {
  mixins: [BaseList],
  components: {
    AnalysisDetail,
    UrlDetail,
  },
  data() {
    return {
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ip: null,
      },
      total: 0,
      sourceList: [],
      loading: false,
      accessDetailShow: false,
      analysisDetailShow: false,
      currentIp: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      fetchList(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.sourceList = res.rows;
            this.total = res.total;
          } else {
            this.sourceList = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .catch(() => {
          this.sourceList = [];
          this.total = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleAnalysis(row) {
      this.currentIp = row.sourceIp;
      this.analysisDetailShow = true;
    },

    handleDetail(row) {
      this.currentIp = row.sourceIp;
      this.accessDetailShow = true;
    },

    submitForm() {
      this.getList();
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },
  },
};
</script>

<style lang="scss"></style>
